<template>
  <div class="wrap" v-loading="loading">
    <div class="content">

      <el-form ref="form" :model="currentForm" label-width="200px" label-position="left" label-suffix=":">

        <div class="form-title">{{ $t('库存预警设置') }}</div>
        <!--<el-form-item :label="$t('预警设置')">-->
        <!--  <el-radio-group v-model="currentForm.saveInventoryTipsInfo" @change="setTipsNum()">-->
        <!--    <el-radio :label="false">{{ $t('系统设置') }}</el-radio>-->
        <!--    <el-radio :label="true">{{ $t('自定义') }}</el-radio>-->
        <!--  </el-radio-group>-->
        <!--</el-form-item>-->
        <el-form-item :label="$t('平台前台库存',{platform: getMercadoName()})" v-if="$store.getters.accountMKD" label-width="200px">
          <el-input-number
            v-model="currentForm.inventoryTipsNum"
            autocomplete="off"
            :min="1"
            @change="setInventoryTipsInfo()"
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('平台前台库存',{platform: getFalabellaName()})" v-if="$store.getters.accountFalabella" label-width="200px">
          <el-input-number
            v-model="currentForm.faInventoryTipsNum"
            autocomplete="off"
            :min="1"
            @change="setInventoryTipsInfo()"
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('平台前台库存',{platform: getShopeeName()})" v-if="$store.getters.accountShopee" label-width="200px">
          <el-input-number
            v-model="currentForm.spInventoryTipsNum"
            autocomplete="off"
            :min="1"
            @change="setInventoryTipsInfo()"
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('平台前台库存',{platform: getSheinName()})" v-if="$store.getters.accountShein" label-width="200px">
          <el-input-number
            v-model="currentForm.siInventoryTipsNum"
            autocomplete="off"
            :min="1"
            @change="setInventoryTipsInfo()"
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('平台前台库存',{platform: getAmazonName()})" v-if="$store.getters.accountAmazon" label-width="200px">
          <el-input-number
            v-model="currentForm.awsInventoryTipsNum"
            autocomplete="off"
            :min="1"
            @change="setInventoryTipsInfo()"
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('平台前台库存',{platform: getTikTokName()})" v-if="$store.getters.accountTikTok" label-width="200px">
          <el-input-number
            v-model="currentForm.tiktokInventoryTipsNum"
            autocomplete="off"
            :min="1"
            @change="setInventoryTipsInfo()"
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('平台前台库存',{platform: getAliexpressName()})" v-if="$store.getters.accountAliexpress" label-width="200px">
          <el-input-number
            v-model="currentForm.aliexpressInventoryTipsNum"
            autocomplete="off"
            :min="1"
            @change="setInventoryTipsInfo()"
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('代发库存')" label-width="200px">
          <el-input-number
            v-model="currentForm.stockTipsNum"
            autocomplete="off"
            :min="1"
            @change="setInventoryTipsInfo()"
          ></el-input-number>
          <div class="font-red" style="line-height: 20px;font-size: 13px">
            {{ $t('1. 库存列表中，前台库存与仓库库存会根据当前设置的预警值给出快速筛选选项') }}
            <br>
            {{ $t('2. 当对应库存低于预警值时，将被标红显示') }}
          </div>
        </el-form-item>

        <div class="form-title" v-show="false">{{ $t('自动下载面单设置') }}</div>
        <el-form-item :label="'Mercado Libre ' + $t('下载设置')" v-show="false">
          <el-radio-group v-model="currentForm.autoDownloadShipping">
            <el-radio :label="false">{{ $t('不下载') }}</el-radio>
            <el-radio :label="true">{{ $t('自动下载') }}</el-radio>
          </el-radio-group>
          <div class="form-tips">{{ $t('美客多店铺出单后，根据此设置决定是否自动下载面单把订单状态变为“准备发货”，降低取消率，提升体验分。默认下载时间为订单同步5分钟后') }}</div>
        </el-form-item>

        <div class="form-title" v-show="false">{{ $t('自动同步前台库存设置') }}</div>
        <el-form-item :label="$t('同步设置')" v-show="false">
          <el-radio-group v-model="currentForm.autoSyncInventory">
            <el-radio :label="false">{{ $t('不同步') }}</el-radio>
            <el-radio :label="true">{{ $t('自动同步') }}</el-radio>
          </el-radio-group>
          <div class="form-tips" v-html="$t('开启自动同步后，根据下方设置的同步平台和预警线，设置当前系统发货的SKU出单将预扣系统的代发库存，并自动同步剩余库存到前台库存')"></div>
          <div class="form-tips">
            {{ $t('自动同步库存属于高风险操作，开启“自动同步”前请仔细阅读') }}
            <el-button type="text" @click="showStatement()">《{{ $t('自动同步前台库存风险提示') }}》</el-button>
          </div>
          <template v-if="currentForm.autoSyncInventory === true">
            <el-form-item :label="$t('同步平台')" label-width="100px" v-show='false'>
              <el-checkbox-group v-model="currentForm.autoSyncInventoryPlatformList">
                <el-checkbox :label="platformList['1']">Mercado Libre</el-checkbox>
                <el-checkbox :label="platformList['4']">SHEIN</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="$t('同步预警线')" label-width="100px">
              <el-input-number v-model="currentForm.autoSyncInventoryNum" :min="1" :max="99999"></el-input-number> {{ $t('代发库存') }}
            </el-form-item>
            <div class="form-tips">
              {{ $t('根据同步预警线设置的代发库存数量，代发库存在预警线上时每天0点同步一次；在预警线下时每售出一个同步一次；') }}
            </div>
          </template>
        </el-form-item>

        <div class="form-title">
          物流面单客户消息设置
        </div>
        <el-form-item label="是否启用模板消息">
          <el-radio v-model="currentForm.messageStatus" :label="1">启用</el-radio>
          <el-radio v-model="currentForm.messageStatus" :label="0">关闭</el-radio>
          <div class="font-red f14">启用后，“物流面单”和“特殊”类型的订单（无平台面单订单）系统发货后会自动发送一条模板消息给买家</div>
        </el-form-item>
        <template v-if="currentForm.messageStatus === 1">
          <el-form-item label="模板消息参数">
            <el-button
              v-for="btn in messageTemplateParams"
              :key="btn.btnText"
              :type="btn.btnType ? btn.btnType : 'primary'"
              @click="addMessageTemplateParams(btn.btnParams)"
            >
              {{btn.btnText}}
            </el-button>

          </el-form-item>
          <el-form-item label="模板消息">
            <el-input
              type="textarea"
              v-model="currentForm.messageTemplate"
              ref="messageInput"
              :autosize="{minRows: 2}"
              placeholder="编辑物流面单消息模板，支持换行，可点击上方按钮添加对应的参数"
            ></el-input>
          </el-form-item>
        </template>



      </el-form>

      <el-button type="primary" @click="saveSetting" :loading="saveLoading">{{ $t('common.save') }}</el-button>
    </div>

    <el-dialog
      :title="''"
      :visible.sync="showStatementDialog"
      width="750px"
      custom-class="custom-dialog"
    >
      <div style="margin-top: -15px; margin-left: 30px; margin-right: 30px; font-size: 14px;">
        <div style="text-align: center; font-size: 20px; font-weight: bold;">{{ $t('自动同步前台库存风险提示') }}</div>
        <div style="margin-top: 15px;">{{ $t('在使用本系统的自动同步功能将库存数据同步到Mercado Libre、SHEIN平台时，请务必仔细阅读以下风险提示') }}:</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('1、功能说明') }}</div>
        <div style="margin-top: 15px;">{{ $t('自动同步前台库存功能，能够有效防止和降低因商品多链接销售而导致的超卖现象，从而提高库存管理效率和客户满意度。') }}</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('2、风险提示') }}</div>
        <div style="margin-top: 15px;">{{ $t('自动同步库存操作涉及高风险。库存数据的错误同步可能导致库存不准确、订单无法正常处理、销售损失以及客户投诉等问题。请确保在开启自动同步功能之前仔细核对库存数据的准确性，并定期检查同步结果。') }}</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('3、责任限制') }}</div>
        <div style="margin-top: 15px;">{{ $t('本系统仅作为库存管理和同步工具使用。我们不对任何因使用自动同步功能而导致的直接或间接损失承担责任，包括但不限于库存不准确、销售损失、客户投诉、业务中断等。') }}</div>
        <div>{{ $t('用户在开启和使用自动同步功能时，应自行承担所有风险。我们强烈建议用户在使用自动同步功能前，备份所有相关数据，并确保库存数据的准确性。') }}</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('4、使用指引') }}</div>
        <div style="margin-top: 15px;">{{ $t('请在开启自动同步功能前，确保系统设置和库存数据的准确性。如有任何疑问，请在开启功能前联系我们的技术支持团队获取帮助。') }}</div>
        <div>{{ $t('我们建议用户在首次开启自动同步功能时，密切监控同步结果，确保数据同步正确无误。') }}</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('5、数据备份') }}</div>
        <div style="margin-top: 15px;">{{ $t('用户有责任确保在开启自动同步功能前对所有库存数据进行全面备份。我们不对因用户未备份数据而导致的任何数据丢失或损坏承担责任。') }}</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('6、技术支持') }}</div>
        <div style="margin-top: 15px;">{{ $t('如在自动同步过程中遇到任何技术问题，请及时联系系统技术支持团队。我们将尽力提供必要的协助。') }}</div>
        <div style="margin-top: 15px;">{{ $t('通过开启本系统的自动同步功能，您表示已阅读、理解并同意以上内容，若您不同意，请勿开启自动同步功能。') }}</div>
        <div style="margin-top: 15px; display: flex; justify-content: center;">
          <el-button size="medium" @click="showStatementDialog = false">{{$t('关闭')}}</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getSystemSetting, saveSystemSetting} from "@/api/setting";
import {deepCopy, getMercadoName, getAliexpressName, getAmazonName, getFalabellaName, getSheinName, getShopeeName, getTikTokName} from "@/utils";
import {getWareHouseName} from "@/utils/common";

export default {
  name: "systemSetting",
  data(){
    return {
      messageTemplateParams: [
        {btnText: '快递公司', btnType: 'primary', btnParams: '{快递公司}'},
        {btnText: '快递单号', btnType: 'primary', btnParams: '{快递单号}'},
      ],
      loading: false,
      saveLoading: false,
      currentForm: {
        autoDownloadShipping: false,
        autoSyncInventory: false,
        autoSyncInventoryPlatformList: [],
        autoSyncInventoryNum: 30,
        saveInventoryTipsInfo: true,
        inventoryTipsNum: 0,
        faInventoryTipsNum: 0,
        spInventoryTipsNum: 0,
        siInventoryTipsNum: 0,
        awsInventoryTipsNum: 0,
        tiktokInventoryTipsNum: 0,
        aliexpressInventoryTipsNum: 0,
        stockTipsNum: 0,
        messageTemplate: '',
        messageStatus: 0,
      },
      platformList: [],
      tipsNumInfo: {},
      userTipsNumInfo: {},
      showStatementDialog: false,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getWareHouseName,
    getMercadoName,
    getAliexpressName,
    getAmazonName,
    getFalabellaName,
    getSheinName,
    getShopeeName,
    getTikTokName,
    getData(){
      this.loading = true;
      getSystemSetting()
        .then(res=>{
          this.loading = false
          this.currentForm = deepCopy(res.data)
          this.platformList = deepCopy(res.info.platformList)
          this.tipsNumInfo = deepCopy(res.info.tipsNumInfo)
          this.userTipsNumInfo = deepCopy(res.info.userTipsNumInfo)
          this.setTipsNum()
        })
    },
    setTipsNum(){
      if (this.currentForm.saveInventoryTipsInfo === true) {
        this.$set(this.currentForm, 'inventoryTipsNum', this.userTipsNumInfo.inventoryTipsNum)
        this.$set(this.currentForm, 'faInventoryTipsNum', this.userTipsNumInfo.faInventoryTipsNum)
        this.$set(this.currentForm, 'spInventoryTipsNum', this.userTipsNumInfo.spInventoryTipsNum)
        this.$set(this.currentForm, 'siInventoryTipsNum', this.userTipsNumInfo.siInventoryTipsNum)
        this.$set(this.currentForm, 'awsInventoryTipsNum', this.userTipsNumInfo.awsInventoryTipsNum)
        this.$set(this.currentForm, 'tiktokInventoryTipsNum', this.userTipsNumInfo.tiktokInventoryTipsNum)
        this.$set(this.currentForm, 'aliexpressInventoryTipsNum', this.userTipsNumInfo.aliexpressInventoryTipsNum)
        this.$set(this.currentForm, 'stockTipsNum', this.userTipsNumInfo.stockTipsNum)
      } else {
        this.$set(this.currentForm, 'inventoryTipsNum', this.tipsNumInfo.inventoryTipsNum)
        this.$set(this.currentForm, 'faInventoryTipsNum', this.tipsNumInfo.faInventoryTipsNum)
        this.$set(this.currentForm, 'spInventoryTipsNum', this.tipsNumInfo.spInventoryTipsNum)
        this.$set(this.currentForm, 'siInventoryTipsNum', this.tipsNumInfo.siInventoryTipsNum)
        this.$set(this.currentForm, 'awsInventoryTipsNum', this.tipsNumInfo.awsInventoryTipsNum)
        this.$set(this.currentForm, 'tiktokInventoryTipsNum', this.tipsNumInfo.tiktokInventoryTipsNum)
        this.$set(this.currentForm, 'aliexpressInventoryTipsNum', this.tipsNumInfo.aliexpressInventoryTipsNum)
        this.$set(this.currentForm, 'stockTipsNum', this.tipsNumInfo.stockTipsNum)
      }
    },
    setInventoryTipsInfo(){
      return false
      // let info = (this.currentForm.inventoryTipsNum === this.tipsNumInfo.inventoryTipsNum) &&
      //   (this.currentForm.faInventoryTipsNum === this.tipsNumInfo.faInventoryTipsNum) &&
      //   (this.currentForm.spInventoryTipsNum === this.tipsNumInfo.spInventoryTipsNum) &&
      //   (this.currentForm.siInventoryTipsNum === this.tipsNumInfo.siInventoryTipsNum) &&
      //   (this.currentForm.awsInventoryTipsNum === this.tipsNumInfo.awsInventoryTipsNum) &&
      //   (this.currentForm.tiktokInventoryTipsNum === this.tipsNumInfo.tiktokInventoryTipsNum) &&
      //   (this.currentForm.aliexpressInventoryTipsNum === this.tipsNumInfo.aliexpressInventoryTipsNum) &&
      //   (this.currentForm.stockTipsNum === this.tipsNumInfo.stockTipsNum)
      //
      // if (info) {
      //   this.$set(this.currentForm, 'saveInventoryTipsInfo', false)
      // } else {
      //   this.$set(this.currentForm, 'saveInventoryTipsInfo', true)
      // }
    },
    saveSetting(){
      this.$refs.form.validate(vaild=>{
        if(vaild){
          this.saveLoading = true;
          this.currentForm.saveInventoryTipsInfo = true
          saveSystemSetting(this.currentForm)
            .then(res=>{
              this.saveLoading = false;
              this.$successMessage(res.message)
              this.getData()
            })
        }
      })
    },
    showStatement(){
      this.showStatementDialog = true
    },
    addMessageTemplateParams(params){
      this.currentForm.messageTemplate += params
      this.$refs.messageInput.focus()
    }
  }
}
</script>

<style scoped>
/deep/ .custom-dialog {
  margin-top: 5vh !important;
}
</style>

<style scoped lang="scss">
.wrap{
  padding: 10px 30px;
  .content{
    padding: 20px 0;
    .form-title{
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .form-tips{
      font-size: 14px;
      color: #AAAAAA;
    }
  }
}
</style>
